import { RetweetOutlined } from "@ant-design/icons"
import { Button, Divider, Flex, Typography } from "antd"
import { FC, useCallback, useEffect, useState } from "react"

import { queryClubContributeList } from "@/api/member"
import { IMemberList } from "@/api/member/types"
import { IMemberParams } from "@/api/risk/types"
import { DataList } from "@/components/common"
import { usePagination } from "@/hooks"
import { useLocale } from "@/locales"

import { ClubContributeInfoContainer } from "./styles"
import { columnsClubContributeInfo } from "./TableInfo"
export const ClubContributeInfo: FC<{ data: IMemberParams }> = ({ data }) => {
	const [clubContributeInfo, setClubContributeInfo] = useState({} as IMemberList)
	const { formatMessage } = useLocale()

	const { pagination, onPageChange } = usePagination(100)
	const handleGetClubContributeInfo = useCallback(
		async (isRefresh?: boolean) => {
			const [err, clubContributeRes] = await queryClubContributeList(
				!isRefresh ? { userId: data.userId, ...pagination } : { userId: data.userId, pageNum: 1 }
			)
			if (!err) setClubContributeInfo(clubContributeRes)
		},
		[pagination]
	)

	useEffect(() => {
		// this will help to refresh pagination when upper actions are changed
		if (data.userId) handleGetClubContributeInfo(true)
	}, [data])

	useEffect(() => {
		handleGetClubContributeInfo()
	}, [pagination])

	return (
		<ClubContributeInfoContainer>
			<Flex gap={10} align="center">
				<Typography>{formatMessage({ id: "member.club_table.club_contribution" })}</Typography>
				<Button icon={<RetweetOutlined />} onClick={() => handleGetClubContributeInfo(true)} type="primary">
					{formatMessage({ id: "member.refresh" })}
				</Button>
			</Flex>
			<Divider />

			<DataList
				maxHeight="300px"
				data={clubContributeInfo.record}
				columns={columnsClubContributeInfo()}
				bordered
				size="middle"
				rowKey="id"
				pagination={{
					current: clubContributeInfo?.pageSize ?? 1,
					pageSize: clubContributeInfo?.pageNum ?? 0,
					total: clubContributeInfo?.totalRecord ?? 0,
					showSizeChanger: true,
					showTotal: (total: number) => `共  ${total}  条`
				}}
				onChange={onPageChange}
			/>
		</ClubContributeInfoContainer>
	)
}
